
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Backbone.Validation, by Thomas Pedersen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/assets/website/styles/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px;
      }
    </style>
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="brand" href="#">Backbone.Validation</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="http://thedersen.com/projects/backbone-validation/">Documentation</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Examples</li>
              <li class="active"><a href="#">Basic</a></li>
              <li><a href="#onblur">Live validation on blur</a></li>
            </ul>
          </div>
        </div>
        <div class="span9" id="example">
        </div>
      </div>
    </div>

    <script type="text/template" id="basic-template">
      <form class="form-horizontal">
         <div class="alert alert-error" style="display:none">
            <strong>Ooops!</strong> You did not pass the validation.
          </div>
          <div class="alert alert-success" style="display:none">
            <strong>Success!</strong> You passed the validation.
          </div>
        <fieldset>
          <legend><%= legend %></legend>
          <div class="control-group">
            <label class="control-label" for="firstName">First Name</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="firstName" name="firstName" data-error-style="inline">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="lastName">Last Name</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="lastName" name="lastName" data-error-style="inline">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="email">Email</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="email" name="email" data-error-style="inline">
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary" id="submit">Save changes</button>
          </div>
        </fieldset>
      </form>
    </script>

		<script src="/assets/js/lib/jquery/jquery-1.7.2.min.js"></script>
<!-- 		<script src="<?php echo base_url();?>assets/js/lib/jquerymobile/jquery.mobile-1.1.0.min.js"></script> 
 -->
		
		<script src="/assets/js/lib/underscore/underscore.js"></script>
		<script src="/assets/js/lib/backbone/backbone.js"></script>
<!-- 		<script src="assets/js/lib/backbonemodelbinder/backbone-modelbinder.js"></script> -->
		<script src="/assets/js/lib/backbonevalidation/backbone-validation-min.js"></script>


    <script src="http://thedersen.com/projects/backbone-validation/examples/bootstrap/js/bootstrap-tooltip.js"></script>
<!--     <script src="js/serialize-object.js"></script> -->
<!--     <script src="js/backbone.validation.bootstrap.js"></script> -->
<!--     <script src="js/router.js"></script> -->
<!--     <script src="js/basic-example.js"></script> -->

    <script type="text/javascript">
      $('.nav li').click(function(el){
        $('.nav li').removeClass('active');
        $(el.target).closest('li').addClass('active');
      });
      


var Router = Backbone.Router.extend({
routes: {
'': 'index',
'onblur': 'onblur'
},
index: function() {
this._render(new OnBlurView({ model: new BasicModel() }));
},
onblur: function() {
this._render(new OnBlurView({ model: new BasicModel() }));
},
_render: function(view){
if(this.currentView){
Backbone.Validation.unbind(view);
this.currentView.remove();
}
this.currentView = view;
$('#example').html(view.render().el);
}
});
$(function(){
new Router();
Backbone.history.start({root: '/projects/backbone-validation/examples/'});
});


var BasicModel = Backbone.Model.extend({
validation: {
firstName: {
required: true,
msg: 'Please provide your first name'
},
lastName: {
required: true,
msg: 'Please provide your last name'
},
email: [{
required: true,
msg: 'Please provide your email'
},{
pattern: 'email',
msg: 'Email provided is not correct'
}]
}
});




var OnBlurView = Backbone.View.extend({
events: {
'click #submit': 'submit',
'blur input': 'updateModel'
},
render: function() {
$(this.el).html(_.template($('#basic-template').html(), {legend: 'Validation on blur'}));
Backbone.Validation.bind(this);
this.model.on('validated:valid', this.valid, this);
this.model.on('validated:invalid', this.invalid, this);
return this;
},
updateModel: function(el){
var $el = $(el.target);
this.model.set($el.attr('name'), $el.val());
},
valid: function(){
this.$('.alert').hide();
this.$('.alert-success').fadeIn();
},
invalid: function(){
this.$('.alert').hide();
this.$('.alert-error').fadeIn();
},
submit: function(e){
e.preventDefault();
this.$('.alert').hide();
if(this.model.isValid(true)){
this.$('.alert-success').fadeIn();
}
else {
this.$('.alert-error').fadeIn();
}
}
});

      
      

_.extend(Backbone.Validation.callbacks, {
valid: function(view, attr, selector){
var control = view.$('[' + selector + '=' + attr + ']');
var group = control.parents(".control-group");
group.removeClass("error");
if (control.data("error-style") === "tooltip"){
// CAUTION: calling tooltip("hide") on an uninitialized tooltip
// causes bootstraps tooltips to crash somehow...
if (control.data("tooltip"))
control.tooltip("hide");
}
else if (control.data("error-style") === "inline"){
group.find(".help-inline.error-message").remove();
}
else{
group.find(".help-block.error-message").remove();
}
},
invalid: function(view, attr, error, selector) {
var control = view.$('[' + selector + '=' + attr + ']');
var group = control.parents(".control-group");
group.addClass("error");
if (control.data("error-style") === "tooltip"){
var position = control.data("tooltip-position") || "right";
control.tooltip({
placement: position,
trigger: "manual",
title: error
});
control.tooltip("show");
}
else if (control.data("error-style") === "inline"){
if (group.find(".help-inline").length === 0){
group.find(".controls").append("<span class=\"help-inline error-message\"></span>");
}
var target = group.find(".help-inline");
target.text(error);
}
else {
if (group.find(".help-block").length === 0) {
group.find(".controls").append("<p class=\"help-block error-message\"></p>");
}
var target = group.find(".help-block");
target.text(error);
}
}
});


 

     
    </script>
  </body>
</html>
